<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/bootstrap-theme.min.css">
    <title>Bootstrap按钮组案例</title>
</head>

<body>
    <div class="container">
        <div class="btn-group-vertical">
            <button type="button" class="btn btn-default">Left</button>
            <button type="button" class="btn btn-default">Middle</button>
            <button type="button" class="btn btn-default">Right</button>
        </div>
    </div>

    <div class="btn-toolbar">
        <div class="btn-group">
            <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
            <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
            <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
            <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
            <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
            <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
            <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
            <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
        </div>

        <div class="container">
            <div class="btn-group btn-group-lg">
                <button type="button" class="btn btn-default">Left</button>
                <button type="button" class="btn btn-default">Middle</button>
                <button type="button" class="btn btn-default">Right</button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-default">Left</button>
                <button type="button" class="btn btn-default">Middle</button>
                <button type="button" class="btn btn-default">Right</button>
            </div>
            <div class="btn-group btn-group-sm">
                <button type="button" class="btn btn-default">Left</button>
                <button type="button" class="btn btn-default">Middle</button>
                <button type="button" class="btn btn-default">Right</button>
            </div>
            <div class="btn-group btn-group-xs">
                <button type="button" class="btn btn-default">Left</button>
                <button type="button" class="btn btn-default">Middle</button>
                <button type="button" class="btn btn-default">Right</button>
            </div>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-default">1</button>
            <button type="button" class="btn btn-default">2</button>
            <div class="btn-group">

                <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                    下拉菜单
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">点我</a></li>
                    <li><a href="#">点我</a></li>
                </ul>
            </div>
        </div>

        <div class="btn-group btn-group-justified">
            <div class="btn-group">
                <button type="button" class="btn btn-default">Left</button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-default">Middle</button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-default">Right</button>
            </div>
        </div>
        <script src="../js/jquery-1.12.4.js"></script>
        <script src="../js/bootstrap.min.js"></script>
</body>

</html>